<template>
  <div class="com-compare-item">
    <div class="item">
      <div class="top">
        <div class="left">{{ title[0] }}</div>
        <div :style="{ color: color, 'font-size': '24px' }">{{ value[0] }}</div>
      </div>
      <div class="btm" :style="{background: color}"></div>
    </div>
    <div class="item">
      <div class="top">
        <div class="left">{{ title[1] }}</div>
        <div :style="{ color: color, 'font-size': '24px' }">{{ value[1] }}</div>
      </div>
      <div class="btm" :style="{background: color}"></div>
    </div>
  </div>
</template>

<script>
export default {
  props: ["title", "value", "color"]
};
</script>

<style lang="scss" scoped>
.com-compare-item {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10px;
}
.item {
  width: 40%;
}

.top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  .left {
    width: 56px;
    height: 40px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 4px;
    text-align: left;
  }
}
.btm {
  height: 2px;
}
</style>
